<template>
    <form action="/public">
        <van-search v-model="searchText" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
    </form>
    <van-divider content-position="left">已选标签</van-divider>
    <div v-if="activeIds.length === 0" style="padding-top: 5px;">请选择标签</div>
    <van-row type="flex" justify="center" gutter="4" v-else >
        <van-col  v-for="tag in activeIds" style="padding-top: 5px;" >
            <van-tag  closeable size="large" type="primary" @close="doClose(tag)">
                {{ tag }}
            </van-tag>
        </van-col>
    </van-row>
    
    <van-divider content-position="left">可选择标签</van-divider>
    <van-tree-select v-model:active-id="activeIds" v-model:main-active-index="activeIndex" :items="tagList" />
    <van-button block type="primary" @click="doSearchResult" class="searchBtn" round>搜索</van-button>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const searchText = ref('');
let originTagList = [
    {
        text: '手游',
        children: [
            { text: '王者荣耀', id: '王者荣耀' },
            { text: '原神', id: '原神' },
            { text: '和平精英', id: '和平精英' },
            { text: '金铲铲', id: '金铲铲' },
            { text: '英雄联盟手游', id: '英雄联盟手游' },
            { text: '暗区突围', id: '暗区突围' },
            { text: '第五人格', id: '第五人格' },
            { text: '开心消消乐', id: '开心消消乐' },
            { text: '蛋仔派对', id: '蛋仔派对' },
            { text: '迷你世界', id: '迷你世界' },
        ],
    },
    {
        text: '端游',
        children: [
            { text: 'LOL', id: 'LOL' },
            { text: '穿越火线', id: '穿越火线' },
            { text: '无畏契约', id: '无畏契约' },
            { text: '绝地求生', id: '绝地求生' },
            { text: 'NBA2OL', id: 'NBA2OL' },
            { text: 'CsGO', id: 'CsGO' },
            { text: '地下城与勇士', id: '地下城与勇士' },
            { text: 'APEX', id: 'APEX' },
        ],
    },
    {
        text: '页游',
        children: [
            { text: '洛克王国', id: '洛克王国' },
            { text: '造梦西游', id: '造梦西游' },
            { text: '赛尔号', id: '赛尔号' },
        ],
    },
];
let tagList = ref(originTagList);
const onSearch = () => {
    tagList.value = originTagList.map(parentTag => {
        if (Array.isArray(parentTag.children) && parentTag.children.length > 0) {
            const tempChildren = parentTag.children.filter(item => item.text.includes(searchText.value));
            const tempParentTag = { ...parentTag };
            tempParentTag.children = tempChildren;
            return tempParentTag;
        }
        return parentTag;
    });
};

const onCancel = () => {
    searchText.value = '';
    tagList.value = originTagList;
}

// 已选中的标签
const activeIds = ref([]);
const activeIndex = ref(0);

// 移除标签
function doClose(tag) {
    activeIds.value = activeIds.value.filter(item => {
        return item !== tag
    });
}

const doSearchResult = () => {
    // 执行搜索后跳转
    router.push({
        path: '/user/listByTag',
        query: {
            tags: activeIds.value
        }
    })
}
</script>

<style scoped lang="scss">
.searchBtn{
    margin: auto;
    margin-top: 10px;
    width: 200px;
}
</style>